<!DOCTYPE html>
<html>
    <header>
        <style>
            .box {
                width: 100px;
                text-align: center;
            }
            .content {
                display: inline-block;
                text-align: left;
            }
            .father {
                width:100px;
            }
            .son {
                padding: 20px;
                border: 1px solid;
            }
            .all {
                width:100px;
                padding:20px;
                border:1px solid;
            }
            .box-test {
                width:100px;
                box-sizing: border-box;
                padding:20px;
                border:1px solid;
            }
        </style>
    </header>
    <body>
        <div>
            <span style="display: inline-block; width: 300px; height: 50px; border-color: red; border-style: solid; ">This is inLine block</span>
            <span style="display: inline-block; width: 200; height: 100px; border-color: blue; border-style: solid; ">This is inLine block</span>
            <span>this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline this is inline </span>
        </div>
        <div>
            <div class="box">
                <p id="conMore" class="content">文字内容</p>
            </div>
            <div class="box">
                <p id="conMore" class="content">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
            </div>
        </div>
        <div>
            <div class="father son">测试宽度自动分离(错误写法)</div>
        </div>
        <div class="father">
            <div class="son">测试宽度自动分离(分离写法)</div>
        </div>
        <div>
            <div class="all">测试宽度自动分离(对比效果,此时width不为想象中的100px)</div>
        </div>
        <div>
            <div class="box-test">使用box-sizing:border-box来实现自动分离的效果</div>
        </div>
    </body>
</html>